<template>
  <div id="home" class="wrapper">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <tab-control :titles="['流行','新款','精选']"
                  @tabClick="tabClick"
                  class="tab-control" 
                  ref="tabControl1" v-show='isTabFixed'
                  ></tab-control>
    <scroll class="contents" 
            ref="scroll" 
            :probe-type="3" 
            @scroll='contentScroll'
            :pull-up-load='true'
            @pullingUp="loadMore">
      <home-swiper :banners = "banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
      <recommend-view :recommends = "recommends"></recommend-view>
      <feature-view></feature-view>
      <tab-control :titles="['流行','新款','精选']"
                  @tabClick="tabClick"
                  ref="tabControl2"
                  ></tab-control>
      <good-list :goods="showGoods"></good-list>
    </scroll>

    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import GoodList from 'components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll'

import HomeSwiper from './childComps/HomeSwiper'
import RecommendView from "./childComps/RecommendView"
import FeatureView from "./childComps/FeatureVIew"

import {
  getHomeMultidata,
  getHomeGoods
} from "network/home"
// import {debounce} from 'common/utils'
import {itemListenerMixin,backTopMixin} from "common/mixin"

export default {
  name:"Home",
  
  components:{
    NavBar,
    HomeSwiper,
    RecommendView,
    FeatureView,
    TabControl,
    GoodList,
    Scroll,
    
  },
  data(){
    return {
      banners:[],
      recommends:[],
      goods:{
        'pop':{page:0,list:[]},
        'new':{page:0,list:[]},
        'sell':{page:0,list:[]}
      },
      currentType:'pop',
      
      tabOffsetTop:0,
      isTabFixed:false,
      saveY:0,
      // itemImgListener:null
    }
  },
  mixins:[itemListenerMixin,backTopMixin],
  computed:{
    showGoods(){
      return this.goods[this.currentType].list
    }
  },
  destroyed(){
    console.log('destroy')
  },
  activated(){
    
    this.$refs.scroll.scrollTo(0,this.saveY,0)
    this.$refs.scroll.refresh()
  },
  deactivated(){
    this.saveY = this.$refs.scroll.getScrollY()
    
    this.$bus.$off('itemImageLoad',this.itemImgListener)
  },
  created(){
    this.getHomeMultidata()
    this.getHomeGoods('pop')

    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
  // mounted(){
    
  // },
  methods:{
    tabClick(index){
      switch(index){
        case 0:this.currentType = 'pop';break
        case 1:this.currentType = 'new';break
        case 2:this.currentType = 'sell';break
      }
      this.$refs.tabControl1.currentIndex= index
      this.$refs.tabControl2.currentIndex= index
    },
    //
    getHomeMultidata(){
      getHomeMultidata().then(res=>{
        this.banners = res.data.banner.list
        this.recommends = res.data.recommend.list
      })
    },
    getHomeGoods(type){
      const page = this.goods[type].page + 1
      getHomeGoods(type,page).then(res=>{
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page += 1
        this.$refs.scroll.finishPullUp()
      })
    },
    
    contentScroll(position){    
        this.ListenShowBackTop(position)

        this.isTabFixed = (-position.y) > this.tabOffsetTop
    },
    loadMore(){
      this.getHomeGoods(this.currentType)
    },
    swiperImageLoad(){
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
    }
  }
}
</script>
  
<style scoped>
  #home{
    height: 100vh;
    /* padding-top:44px; */
    position: relative;
  }
  .home-nav{
      background-color: var(--color-tint);
      color: white;
      /* position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 9; */
    }
  
  .tab-control{
    position: relative;
    z-index: 9;
  }
  .contents{
    position: absolute; 
    overflow: hidden; 
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0; 
  }
  
</style>